<template>
    <view class="container" v-if="showPrivacy">
        <view class="content-wrap">
            <view class="title">用户隐私保护提示</view>
            <view class="desc">
                在您使用海外账户预约小程序服务之前，请仔细阅读
                <text class="link" @click="handleOpenPrivacyContract">《海外账户预约小程序隐私保护指引》</text>
                如果你同意该指引，请点击“同意”开始使用本小程序
            </view>
            <view class="btns">
                <button class="btn cancel" @click="hide">拒绝</button>
                <button class="btn sure" id="agree-btn" open-type="agreePrivacyAuthorization"
                    @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
            </view>
        </view>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue'
const showPrivacy = ref(false);

onLoad(() => {
    wx.getPrivacySetting({
        success: res => {
            console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
            if (res.needAuthorization) {
                // 需要弹出隐私协议
                console.log('隐私协议未授权')
                showPrivacy.value = true;
            } else {
                console.log('隐私协议授权过')
                showPrivacy.value = false;
            }
        }
    })
})

const show = () => {
    showPrivacy.value = true;
}

const hide = () => {
    showPrivacy.value = false;
}

const handleAgreePrivacyAuthorization = () => {
    console.log('handleAgreePrivacyAuthorization-->', 'handleAgreePrivacyAuthorization')
    // 用户同意隐私协议事件回调
    showPrivacy.value = false;
}

const handleOpenPrivacyContract = () => {
    // 打开隐私协议页面
    wx.openPrivacyContract({
        success: () => {
            console.log('用户打开隐私协议')
        }
    })
}
</script>

<style lang="scss" scoped>
.container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .6);

    .content-wrap {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 30rpx;
        background-color: white;
        border-radius: 20rpx;

        .title {
            font-size: 32rpx;
            font-weight: 700;
            color: black;
            line-height: 60rpx;
        }

        .desc {
            margin-top: 20rpx;
            font-size: 26rpx;
            color: rgb(78, 69, 69);

            .link {
                font-size: 26rpx;
                color: rgb(65, 156, 65);
            }
        }

        .btns {
            margin: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            .btn {
                width: 200rpx;
                height: 80rpx;
                border-radius: 10rpx;
                text-align: center;
                line-height: 80rpx;
                font-size: 32rpx;
            }

            .cancel {
                background-color: #ddd;
                color: rgb(65, 156, 65);
                border: null;
            }

            .sure {
                background: rgb(65, 156, 65);
                color: white;
                margin-left: 20rpx;
            }
        }
    }
}
</style>